<script setup lang="ts">
import { ElTable, ElTableColumn } from 'element-plus';
import { TableProps } from './table';
import { vDragable } from 'element-plus-table-dragable';

const props = defineProps<TableProps>();
</script>
<template>
  <ElTable stripe v-bind="{ ...$attrs, data: props.data }" class="table-color" v-dragable="props?.options || []">
    <ElTableColumn
      v-for="column in columns"
      :key="column.prop"
      v-bind="{ ...column }"
      :align="column.align || 'center'"
    >
      <template v-if="column.slotName" #default="scope">
        <slot :name="column.slotName" :scope="scope"></slot>
      </template>
    </ElTableColumn>
    <template v-for="(_, key) in $slots" #[key]="scope">
      <slot :name="key" :scope="scope" />
    </template>
  </ElTable>
</template>
<style lang="scss" scoped>
.table-color {
  --el-table-row-hover-bg-color: #d9e8ff;
}
</style>
